<template>
  <el-dialog :title="title" v-model="dialogVisible" width="480px" :before-close="changeVisible">
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 15px"
      size="mini"
      max-height="340"
      row-key="id"
      :close-on-click-modal="false"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
        :selectable="selectable"
      ></el-table-column>
      <el-table-column label="缩略图" width="100">
        <template #default="scope">
          <el-image style="width: 40px; height: 40px" :src="scope.row.image" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="total" @current-change="getList"></el-pagination>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeVisible">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { goodsOption, Goods } from "@/utils/interface";

@Options({
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    tage: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class dialogEdit extends Vue {
  [x: string]: any;
  dialogVisible: Boolean = this.isVisible;
  data() {
    return {
      title: "选择添加商品",
      loading: false,
      list: [],
      multipleSelection: {}, // 表格选中
      getData: {
        state: 1,
        page: 1,
        pageSize: 10,
      },
      total: 0,
    };
  }

  mounted() {
    this.getList(1);
  }

  // 查询数据
  getList(page: Number) {
    if (page) {
      this.getData.page = page;
    }
    this.loading = true;
    let nd = Object.assign({}, this.getData);
    this.API.goodsList(nd).then((res: any) => {
      this.loading = false;
      this.total = res.total;
      this.list = res.records;
    });
  }

  // 判断复选框是否禁用
  selectable(row: Goods, index: number) {
    let arr = this.tage.goodsList;
    let nd = true;
    arr.forEach((element: Goods) => {
      if (element.id == row.id) {
        return (nd = false);
      }
    });
    return nd;
  }

  // 表格选中
  handleSelectionChange(val: any) {
    this.multipleSelection = val;
  }

  // 确定
  submit() {
    let ids: Array<Number> = [];
    // 原始的数据 取ID
    this.tage.goodsList.forEach((element: Goods) => {
      ids.push(element.id);
    });
    // 选中的数据 取ID
    this.multipleSelection.forEach((element: Goods) => {
      ids.push(element.id);
    });
    this.API.indexSalesUpdate({
      id: this.tage.id,
      goodsIDS: ids.toString(),
    }).then(() => {
      this.$message.success("保存成功");
      this.changeVisible();
      this.$emit("callBack");
    });
  }

  changeVisible() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>
